<template>
  <el-pagination
    :current-page="localPageNum"
    :page-sizes="constant.DEFAULT_PAGE_SIZE_ARR"
    :page-size="localPageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="localPageTotal"
    style="margin-top:10px;"
    @size-change="handlePageSize"
    @current-change="handlePage"
  />
</template>

<script>

export default {
  name: 'ListPager',
  props: {
    pageNum: {
      type: Number,
      required: false,
      default: 1
    },
    pageSize: {
      type: Number,
      required: false,
      default: 10
    },
    pageTotal: {
      type: Number,
      required: false,
      default: 0

    }
  },
  data() {
    return {
      localPageNum: this.constant.DEFAULT_PAGE_NUM,
      localPageSize: this.constant.DEFAULT_PAGE_SIZE,
      localPageTotal: 0
    }
  },
  watch: {
    pageSize: {
      immediate: true,
      handler: 'handleLocalPageSize'
    },
    pageNum: {
      immediate: true,
      handler: 'handleLocalPageNum'
    },
    pageTotal: {
      immediate: true,
      handler: 'handleLocalPageTotal'
    }
  },
  inject: ['handlePage', 'handlePageSize'],
  methods: {

    handleLocalPageSize() {
      this.localPageSize = this.pageSize
    },
    handleLocalPageNum() {
      this.localPageNum = this.pageNum
    },
    handleLocalPageTotal() {
      this.localPageTotal = this.pageTotal
    }
  }
}
</script>

<style scoped>
.main-report_button {
  float: left;
  margin-right: 10px;
}
</style>
